<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<title>Preskool - Vertical Form</title>
<!-- Favicon -->
<link rel="shortcut icon" href="assets/img/favicon.png">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,500;0,600;0,700;1,400&amp;display=swap">
<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css" href="https://www.jq22.com/jquery/bootstrap-5.0.0.css">
<!-- Fontawesome CSS -->
<link rel="stylesheet" href="assets/plugins/fontawesome/css/fontawesome.min.css">
<link rel="stylesheet" href="assets/plugins/fontawesome/css/all.min.css">
<!-- Select2 CSS -->
<link rel="stylesheet" href="assets/plugins/select2/css/select2.min.css">
<!-- Main CSS -->
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<!-- Main Wrapper -->
<div class="main-wrapper"><!-- Header -->
  <div class="header"><!-- Logo -->
    <div class="header-left"><a href="index.html" class="logo"><img src="assets/img/logo.png" alt="Logo"></a><a href="index.html" class="logo logo-small"><img src="assets/img/logo-small.png" alt="Logo" width="30" height="30"></a></div>
    <!-- /Logo --><a href="javascript:void(0);" id="toggle_btn"><i class="fas fa-align-left"></i></a><!-- Search Bar -->
    <div class="top-nav-search">
      <form>
        <input type="text" class="form-control" placeholder="Search here">
        <button class="btn" type="submit"><i class="fas fa-search"></i></button>
      </form>
    </div>
    <!-- /Search Bar --><!-- Mobile Menu Toggle --><a class="mobile_btn" id="mobile_btn"><i class="fas fa-bars"></i></a><!-- /Mobile Menu Toggle --><!-- Header Right Menu -->
    <ul class="nav user-menu">
      <!-- Notifications -->
      <li class="nav-item dropdown noti-dropdown"><a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown"><i class="far fa-bell"></i><span class="badge badge-pill">3</span></a>
        <div class="dropdown-menu notifications">
          <div class="topnav-dropdown-header"><span class="notification-title">Notifications</span><a href="javascript:void(0)" class="clear-noti">Clear All </a></div>
          <div class="noti-content">
            <ul class="notification-list">
              <li class="notification-message"><a href="#">
                <div class="media"><span class="avatar avatar-sm"><img class="avatar-img rounded-circle" alt="User Image" src="assets/img/profiles/avatar-02.jpg"></span>
                  <div class="media-body">
                    <p class="noti-details"><span class="noti-title">Carlson Tech</span>has approved <span class="noti-title">your estimate</span></p>
                    <p class="noti-time"><span class="notification-time">4 mins ago</span></p>
                  </div>
                </div>
                </a></li>
              <li class="notification-message"><a href="#">
                <div class="media"><span class="avatar avatar-sm"><img class="avatar-img rounded-circle" alt="User Image" src="assets/img/profiles/avatar-11.jpg"></span>
                  <div class="media-body">
                    <p class="noti-details"><span class="noti-title">International Software Inc</span>has sent you a invoice in the amount of <span class="noti-title">$218</span></p>
                    <p class="noti-time"><span class="notification-time">6 mins ago</span></p>
                  </div>
                </div>
                </a></li>
              <li class="notification-message"><a href="#">
                <div class="media"><span class="avatar avatar-sm"><img class="avatar-img rounded-circle" alt="User Image" src="assets/img/profiles/avatar-17.jpg"></span>
                  <div class="media-body">
                    <p class="noti-details"><span class="noti-title">John Hendry</span>sent a cancellation request <span class="noti-title">Apple iPhone XR</span></p>
                    <p class="noti-time"><span class="notification-time">8 mins ago</span></p>
                  </div>
                </div>
                </a></li>
              <li class="notification-message"><a href="#">
                <div class="media"><span class="avatar avatar-sm"><img class="avatar-img rounded-circle" alt="User Image" src="assets/img/profiles/avatar-13.jpg"></span>
                  <div class="media-body">
                    <p class="noti-details"><span class="noti-title">Mercury Software Inc</span>added a new product <span class="noti-title">Apple MacBook Pro</span></p>
                    <p class="noti-time"><span class="notification-time">12 mins ago</span></p>
                  </div>
                </div>
                </a></li>
            </ul>
          </div>
          <div class="topnav-dropdown-footer"><a href="#">View all Notifications</a></div>
        </div>
      </li>
      <!-- /Notifications --><!-- User Menu -->
      <li class="nav-item dropdown has-arrow"><a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown"><span class="user-img"><img class="rounded-circle" src="assets/img/profiles/avatar-01.jpg" width="31" alt="Ryan Taylor"></span></a>
        <div class="dropdown-menu">
          <div class="user-header">
            <div class="avatar avatar-sm"><img src="assets/img/profiles/avatar-01.jpg" alt="User Image" class="avatar-img rounded-circle"></div>
            <div class="user-text">
              <h6>Ryan Taylor</h6>
              <p class="text-muted mb-0">Administrator</p>
            </div>
          </div>
          <a class="dropdown-item" href="profile.html">My Profile</a><a class="dropdown-item" href="inbox.html">Inbox</a><a class="dropdown-item" href="login.html">Logout</a></div>
      </li>
      <!-- /User Menu -->
    </ul>
    <!-- /Header Right Menu --></div>
  <!-- /Header --><!-- Sidebar -->
  <div class="sidebar" id="sidebar">
    <div class="sidebar-inner slimscroll">
      <div id="sidebar-menu" class="sidebar-menu">
        <ul>
          <li class="menu-title"><span>Main Menu</span></li>
          <li><a href="index.html"><i class="fas fa-th-large"></i><span>Dashboard</span></a></li>
          <li class="submenu"><a href="#"><i class="fas fa-user-graduate"></i><span>Students</span><span class="menu-arrow"></span></a>
            <ul>
              <li><a href="students.html">Student List</a></li>
              <li><a href="student-details.html">Student View</a></li>
              <li><a href="add-student.html">Student Add</a></li>
              <li><a href="edit-student.html">Student Edit</a></li>
            </ul>
          </li>
          <li class="submenu"><a href="#"><i class="fas fa-chalkboard-teacher"></i><span>Teachers</span><span class="menu-arrow"></span></a>
            <ul>
              <li><a href="teachers.html">Teacher List</a></li>
              <li><a href="teacher-details.html">Teacher View</a></li>
              <li><a href="add-teacher.html">Teacher Add</a></li>
              <li><a href="edit-teacher.html">Teacher Edit</a></li>
            </ul>
          </li>
          <li class="submenu"><a href="#"><i class="fas fa-building"></i><span>Departments</span><span class="menu-arrow"></span></a>
            <ul>
              <li><a href="departments.html">Department List</a></li>
              <li><a href="add-department.html">Department Add</a></li>
              <li><a href="edit-department.html">Department Edit</a></li>
            </ul>
          </li>
          <li class="submenu"><a href="#"><i class="fas fa-book-reader"></i><span>Subjects</span><span class="menu-arrow"></span></a>
            <ul>
              <li><a href="subjects.html">Subject List</a></li>
              <li><a href="add-subject.html">Subject Add</a></li>
              <li><a href="edit-subject.html">Subject Edit</a></li>
            </ul>
          </li>
          <li class="menu-title"><span>Management</span></li>
          <li class="submenu"><a href="#"><i class="fas fa-file-invoice-dollar"></i><span>Accounts</span><span class="menu-arrow"></span></a>
            <ul>
              <li><a href="fees-collections.html">Fees Collection</a></li>
              <li><a href="expenses.html">Expenses</a></li>
              <li><a href="salary.html">Salary</a></li>
              <li><a href="add-fees-collection.html">Add Fees</a></li>
              <li><a href="add-expenses.html">Add Expenses</a></li>
              <li><a href="add-salary.html">Add Salary</a></li>
            </ul>
          </li>
          <li><a href="index.html"><i class="fas fa-holly-berry"></i><span>Holiday</span></a></li>
          <li><a href="index.html"><i class="fas fa-comment-dollar"></i><span>Fees</span></a></li>
          <li><a href="index.html"><i class="fas fa-clipboard-list"></i><span>Exam list</span></a></li>
          <li><a href="index.html"><i class="fas fa-calendar-day"></i><span>Events</span></a></li>
          <li><a href="index.html"><i class="fas fa-table"></i><span>Time Table</span></a></li>
          <li><a href="index.html"><i class="fas fa-book"></i><span>Library</span></a></li>
          <li class="menu-title"><span>Pages</span></li>
          <li class="submenu"><a href="#"><i class="fas fa-shield-alt"></i><span>Authentication </span><span class="menu-arrow"></span></a>
            <ul>
              <li><a href="login.html">Login</a></li>
              <li><a href="register.html">Register</a></li>
              <li><a href="forgot-password.html">Forgot Password</a></li>
              <li><a href="error-404.html">Error Page</a></li>
            </ul>
          </li>
          <li><a href="blank-page.html"><i class="fas fa-file"></i><span>Blank Page</span></a></li>
          <li class="menu-title"><span>Others</span></li>
          <li><a href="sports.html"><i class="fas fa-baseball-ball"></i><span>Sports</span></a></li>
          <li><a href="hostel.html"><i class="fas fa-hotel"></i><span>Hostel</span></a></li>
          <li><a href="transport.html"><i class="fas fa-bus"></i><span>Transport</span></a></li>
          <li class="menu-title"><span>UI Interface</span></li>
          <li><a href="components.html"><i class="fas fa-vector-square"></i><span>Components</span></a></li>
          <li class="submenu active"><a href="#"><i class="fas fa-columns"></i><span>Forms </span><span class="menu-arrow"></span></a>
            <ul>
              <li><a href="form-basic-inputs.html">Basic Inputs </a></li>
              <li><a href="form-input-groups.html">Input Groups </a></li>
              <li><a href="form-horizontal.html">Horizontal Form </a></li>
              <li><a href="form-vertical.html" class="active">Vertical Form </a></li>
              <li><a href="form-mask.html">Form Mask </a></li>
              <li><a href="form-validation.html">Form Validation </a></li>
            </ul>
          </li>
          <li class="submenu"><a href="#"><i class="fas fa-table"></i><span>Tables </span><span class="menu-arrow"></span></a>
            <ul>
              <li><a href="tables-basic.html">Basic Tables </a></li>
              <li><a href="data-tables.html">Data Table </a></li>
            </ul>
          </li>
          <li class="submenu"><a href="javascript:void(0);"><i class="fas fa-code"></i><span>Multi Level</span><span class="menu-arrow"></span></a>
            <ul>
              <li class="submenu"><a href="javascript:void(0);"><span>Level 1</span><span class="menu-arrow"></span></a>
                <ul>
                  <li><a href="javascript:void(0);"><span>Level 2</span></a></li>
                  <li class="submenu"><a href="javascript:void(0);"><span>Level 2</span><span class="menu-arrow"></span></a>
                    <ul>
                      <li><a href="javascript:void(0);">Level 3</a></li>
                      <li><a href="javascript:void(0);">Level 3</a></li>
                    </ul>
                  </li>
                  <li><a href="javascript:void(0);"><span>Level 2</span></a></li>
                </ul>
              </li>
              <li><a href="javascript:void(0);"><span>Level 1</span></a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <!-- /Sidebar --><!-- Page Wrapper -->
  <div class="page-wrapper">
    <div class="content container-fluid"><!-- Page Header -->
      <div class="page-header">
        <div class="row">
          <div class="col">
            <h3 class="page-title">Vertical Form</h3>
            <ul class="breadcrumb">
              <li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
              <li class="breadcrumb-item active">Vertical Form</li>
            </ul>
          </div>
        </div>
      </div>
      <!-- /Page Header -->
      <div class="row">
        <div class="col-md-6">
          <div class="card">
            <div class="card-header">
              <h5 class="card-title">Basic Form</h5>
            </div>
            <div class="card-body">
              <form action="#">
                <div class="form-group">
                  <label>First Name</label>
                  <input type="text" class="form-control">
                </div>
                <div class="form-group">
                  <label>Last Name</label>
                  <input type="text" class="form-control">
                </div>
                <div class="form-group">
                  <label>Email Address</label>
                  <input type="email" class="form-control">
                </div>
                <div class="form-group">
                  <label>Username</label>
                  <input type="text" class="form-control">
                </div>
                <div class="form-group">
                  <label>Password</label>
                  <input type="password" class="form-control">
                </div>
                <div class="form-group">
                  <label>Repeat Password</label>
                  <input type="password" class="form-control">
                </div>
                <div class="text-right">
                  <button type="submit" class="btn btn-primary">Submit</button>
                </div>
              </form>
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="card">
            <div class="card-header">
              <h5 class="card-title">Address Form</h5>
            </div>
            <div class="card-body">
              <form action="#">
                <div class="form-group">
                  <label>Address Line 1</label>
                  <input type="text" class="form-control">
                </div>
                <div class="form-group">
                  <label>Address Line 2</label>
                  <input type="text" class="form-control">
                </div>
                <div class="form-group">
                  <label>City</label>
                  <input type="text" class="form-control">
                </div>
                <div class="form-group">
                  <label>State</label>
                  <input type="text" class="form-control">
                </div>
                <div class="form-group">
                  <label>Country</label>
                  <input type="text" class="form-control">
                </div>
                <div class="form-group">
                  <label>Postal Code</label>
                  <input type="text" class="form-control">
                </div>
                <div class="text-right">
                  <button type="submit" class="btn btn-primary">Submit</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <div class="card">
            <div class="card-header">
              <h5 class="card-title">Two Column Vertical Form</h5>
            </div>
            <div class="card-body">
              <form action="#">
                <h5 class="card-title">Personal Information</h5>
                <div class="row">
                  <div class="col-md-6">
                    <div class="form-group">
                      <label>First Name</label>
                      <input type="text" class="form-control">
                    </div>
                    <div class="form-group">
                      <label>Last Name</label>
                      <input type="text" class="form-control">
                    </div>
                    <div class="form-group">
                      <label>Blood Group</label>
                      <select class="select">
                        <option>Select</option>
                        <option value="1">A+</option>
                        <option value="2">O+</option>
                        <option value="3">B+</option>
                        <option value="4">AB+</option>
                      </select>
                    </div>
                    <div class="form-group">
                      <label class="d-block">Gender:</label>
                      <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="gender" id="gender_male" value="option1">
                        <label class="form-check-label" for="gender_male">Male</label>
                      </div>
                      <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="gender" id="gender_female" value="option2">
                        <label class="form-check-label" for="gender_female">Female</label>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="form-group">
                      <label>Username</label>
                      <input type="text" class="form-control">
                    </div>
                    <div class="form-group">
                      <label>Email</label>
                      <input type="text" class="form-control">
                    </div>
                    <div class="form-group">
                      <label>Password</label>
                      <input type="text" class="form-control">
                    </div>
                    <div class="form-group">
                      <label>Repeat Password</label>
                      <input type="text" class="form-control">
                    </div>
                  </div>
                </div>
                <h5 class="card-title">Postal Address</h5>
                <div class="row">
                  <div class="col-md-6">
                    <div class="form-group">
                      <label>Address Line 1</label>
                      <input type="text" class="form-control">
                    </div>
                    <div class="form-group">
                      <label>Address Line 2</label>
                      <input type="text" class="form-control">
                    </div>
                    <div class="form-group">
                      <label>State</label>
                      <input type="text" class="form-control">
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="form-group">
                      <label>City</label>
                      <input type="text" class="form-control">
                    </div>
                    <div class="form-group">
                      <label>Country</label>
                      <input type="text" class="form-control">
                    </div>
                    <div class="form-group">
                      <label>Postal Code</label>
                      <input type="text" class="form-control">
                    </div>
                  </div>
                </div>
                <div class="text-right">
                  <button type="submit" class="btn btn-primary">Submit</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <div class="card">
            <div class="card-header">
              <h5 class="card-title">Two Column Vertical Form</h5>
            </div>
            <div class="card-body">
              <form action="#">
                <div class="row">
                  <div class="col-md-6">
                    <h5 class="card-title">Personal details</h5>
                    <div class="form-group">
                      <label>Name:</label>
                      <input type="text" class="form-control">
                    </div>
                    <div class="form-group">
                      <label>Password:</label>
                      <input type="password" class="form-control">
                    </div>
                    <div class="form-group">
                      <label>State:</label>
                      <select class="select">
                        <option>Select State</option>
                        <option value="1">California</option>
                        <option value="2">Texas</option>
                        <option value="3">Florida</option>
                      </select>
                    </div>
                    <div class="form-group">
                      <label>Your Message:</label>
                      <textarea rows="5" cols="5" class="form-control" placeholder="Enter message"></textarea>
                    </div>
                  </div>
                  <div class="col-md-6">
                    <h5 class="card-title">Personal details</h5>
                    <div class="row">
                      <div class="col-md-6">
                        <div class="form-group">
                          <label>First Name:</label>
                          <input type="text" class="form-control">
                        </div>
                      </div>
                      <div class="col-md-6">
                        <div class="form-group">
                          <label>Last Name:</label>
                          <input type="text" class="form-control">
                        </div>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-md-6">
                        <div class="form-group">
                          <label>Email:</label>
                          <input type="text" class="form-control">
                        </div>
                      </div>
                      <div class="col-md-6">
                        <div class="form-group">
                          <label>Phone:</label>
                          <input type="text" class="form-control">
                        </div>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-md-12">
                        <div class="form-group">
                          <label>Address line:</label>
                          <input type="text" class="form-control">
                        </div>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-md-6">
                        <div class="form-group">
                          <label>Country:</label>
                          <select class="select">
                            <option>Select Country</option>
                            <option value="1">USA</option>
                            <option value="2">France</option>
                            <option value="3">India</option>
                            <option value="4">Spain</option>
                          </select>
                        </div>
                      </div>
                      <div class="col-md-6">
                        <div class="form-group">
                          <label>State/Province:</label>
                          <input type="text" class="form-control">
                        </div>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-md-6">
                        <div class="form-group">
                          <label>ZIP code:</label>
                          <input type="text" class="form-control">
                        </div>
                      </div>
                      <div class="col-md-6">
                        <div class="form-group">
                          <label>City:</label>
                          <input type="text" class="form-control">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="text-right">
                  <button type="submit" class="btn btn-primary">Submit</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Footer -->
    <footer>
      <p>Copyright © 2020By <a href="#">Dreamguys.</a></p>
    </footer>
    <!-- /Footer --></div>
  <!-- /Page Wrapper --></div>
<!-- /Main Wrapper --><!-- jQuery --><script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script><!-- Bootstrap Core JS --><script src="assets/js/popper.min.js"></script><script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script><!-- Slimscroll JS --><script src="assets/plugins/slimscroll/jquery.slimscroll.min.js"></script><!-- Select2 JS --><script src="assets/plugins/select2/js/select2.min.js"></script><!-- Custom JS --><script src="assets/js/script.js"></script>
</body>
</html>